<template>
  <!-- (4)在模板中不需要 .value，因为Vue3默认给你添上了 -->
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
// import {h} from 'vue'

import {ref} from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  setup() {
    let name = ref('张三'); // (2)'张三'变成了引用对象RefImp:{...,value,...}
    let age = ref(18);

    // (1) 不用ref并对value修改的话，数据不是响应式的：数据修改了但是没有渲染到模板上(因为是原生写法)
    // 而ref是响应式的，看名字也可理解：引用实现，相当于C++的引用，模板拿的是地址，而这里是地址对应的值
    function changeInfo() {
      name.value = '李四'; // (3)在原型对象上有getter和setter可对value进行读写
      age.value = 48;
      console.log(name,age);
    }

    return {
      name,
      age,
      changeInfo
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
